import { CoursewaresListView } from '@/components/CoursewaresList';
import Source from '@/components/SourceSelect/Entity/Source';
import { useAppSelector } from '@/redux/store';
import { Card, Descriptions } from 'antd';
import { useEffect, useState } from 'react';

export interface PackageDetailPorps {
  guid?: string;
  name?: string;
  modifyTime?: string;
  coursewareList?: Source[];
  isCharge?: number;
}

export function PackageDetail({ coursewareList, name, modifyTime, guid, isCharge }: PackageDetailPorps) {
  const [list, setList] = useState(coursewareList ?? []);
  const { entId, organizationType } = useAppSelector((state) => state.loginEnt);
  useEffect(() => {
    if (!coursewareList?.length && guid) {
      Source.xihuiEntPackageDetail(guid).then((data) => {
        setList(data);
      });
    }
  }, [coursewareList, guid]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Card title="课件包基本信息">
        <Descriptions>
          <Descriptions.Item label="课件包名称">{name}</Descriptions.Item>
          <Descriptions.Item label="更新时间">{modifyTime}</Descriptions.Item>
          {organizationType !== 1 ? (
            <Descriptions.Item label="类型">{isCharge == 1 ? '收费' : '免费'}</Descriptions.Item>
          ) : null}
        </Descriptions>
      </Card>
      <Card title="课件包内容">
        <CoursewaresListView value={list} resourceType="200"></CoursewaresListView>
      </Card>
    </div>
  );
}
